<template>
  <div class="clue-container">
    <div class="list-wrap">
      <!--商机tab按钮筛选-->
      <ul class="tab-wrap">
        <li class="tab-item-bisiness" @click="tabChange(0)" :class="{current: tabIndex===0}">
          <div>跟进中</div><i>{{gjzCount}}</i>
        </li>
        <li class="tab-item-bisiness" @click="tabChange(1)" :class="{current: tabIndex===1}">
          <div>即将超时</div><i>{{jjcsCount}}</i>
        </li>
        <li class="tab-item-bisiness" @click="tabChange(2)" :class="{current: tabIndex===2}">
          <div>赢单</div><i>{{ydCount}}</i>
        </li>
        <li class="tab-item-bisiness" @click="tabChange(3)" :class="{current: tabIndex===3}">
          <div>全部</div><i>{{allCount}}</i>
        </li>
        <li class="tab-item-bisiness" @click="tabChange(4)" :class="{current: tabIndex===4}">
          <div>待审核</div><i>{{dshCount}}</i>
        </li>
      </ul>
      <!--三级下拉框筛选-->
      <div class="filter filter-3">
        <div @click="showFilterList('product')"><span>{{filterProductName}}</span><i></i></div>
        <div @click="showFilterList('period')"><span>{{filterPeriodName}}</span><i></i></div>
        <div @click="showFilterList('type')"><span>{{filterTypeName}}</span><i></i></div>
      </div>
      <!--商机列表-->
      <ul class="business-list" v-if="businessList.length > 0"
          v-infinite-scroll="loadMoreBusiness"
          :infinite-scroll-disabled="loading"
          infinite-scroll-distance="1">
        <li class="business-item" v-for="item in businessList" :key="item.pid" @click="businessToDetail(item.pid)">
          <div>{{item.customName}}</div>
          <div>意向产品：<span class="c333">{{item.productTypeName}}</span></div>
          <div>销售阶段：<span class="c333">{{item.salePeriodName}}</span></div>
          <div>预测回款：<span class="c333">{{item.forecastAmt | numFormat}}元</span></div>
          <div class="last-log">
            <div>{{item.lastLogTime | toHistoryDate}}跟踪</div>
            <div>{{item.userName}}</div>
          </div>
        </li>
      </ul>
      <div v-if="businessList.length === 0" class="no-data">暂无数据</div>
      <div v-if="businessList.length > 0 && isLoaded" class="no-data">已全部加载完成</div>
    </div>
    <!--产品和类型ModalPage-->
    <div class="filter-cnt-wrap" v-if="isShowFilterList">
      <div class="filter-cnt">
        <ul class="filter-list filter-list-3">
          <li @click="tabFilter(0)" :class="{selected: filterIndex===0}">全部产品</li>
          <li @click="tabFilter(1)" :class="{selected: filterIndex===1}">所有阶段</li>
          <li @click="tabFilter(2)" :class="{selected: filterIndex===2}">最新获得</li>
        </ul>
        <div class="product-sort-wrap">
          <ul class="product-sort" v-show="filterIndex===0">
            <li :class="{selected: productTypeName === '全部产品'}" @click="selectOneProduct(-1)">全部产品</li>
            <li v-for="(product, index) in productList" :key="product.productType.pid"
                :class="{selected: productTypeName === product.productType.name}"
                @click="selectOneProduct(index)">{{product.productType.name}}</li>
          </ul>
          <ul class="subProduct-sort" v-show="filterIndex===0">
            <li :class="{selected: productName === '全部'}" @click="selectSubProduct('', '全部')">全部</li>
            <li v-for="subProduct in subProductList" :key="subProduct.pid"
                :class="{selected: productName == subProduct.name}"
                @click="selectSubProduct(subProduct.pid, subProduct.name)">{{subProduct.name}}</li>
          </ul>
        </div>
        <ul class="date-sort" v-show="filterIndex===1">
          <li :class="{selected: filterPeriodName == period.name}" @click="selectPeriod(period.pid, period.name)"
              v-for="period in periodList" :key="period.pid">
            {{period.name}}
          </li>
        </ul>
        <ul class="date-sort" v-show="filterIndex===2">
          <li @click="selectType('create')" :class="{selected: filterTypeName==='最新获得'}">最新获得</li>
          <li @click="selectType('update')" :class="{selected: filterTypeName==='最近更新'}">最近更新</li>
        </ul>
      </div>
    </div>
    <div class="black-mask" @click="hideFilterList()" v-if="isShowMask"></div>
  </div>
</template>

<script>
import {GetBusinessList, GetAllProducts} from '@/services/common.service'
import {GetBusinessCount} from '@/services/business.service'

export default {
  name: 'BusinessIndex',
  data () {
    return {
      // tab页签的切换
      tabIndex: 0,
      // 商机数量
      gjzCount: '',
      jjcsCount: '',
      ydCount: '',
      allCount: '',
      dshCount: '',
      // 下拉框筛选
      isShowFilterList: false,
      isShowMask: false,
      filterIndex: '',
      filterProductName: '全部产品',
      filterPeriodName: '所有阶段',
      filterTypeName: '最新获得',
      productTypeName: '全部产品',
      productName: '全部',
      periodList: [
        {name: '所有阶段', pid: '10'},
        {name: '商机确认', pid: '0'},
        {name: '需求沟通', pid: '2'},
        {name: '方案报价', pid: '3'},
        {name: '商务流程', pid: '4'},
        {name: '销售总结', pid: '9'},
        {name: '赢单', pid: '1'},
        {name: '输单', pid: '-1'},
        {name: '放弃', pid: '-2'},
        {name: '回收中断', pid: '-3'}
      ],
      productList: [],
      subProductList: [],
      productTypeId: '',
      product: '',
      // 商机列表list
      loading: true,
      isLoaded: false,
      businessList: [],
      limit: 7,
      offset: 0,
      orderby: 'createTime',
      direction: 'DESC',
      salePeriodId: 5,
      sureStatus: 2
    }
  },
  computed: {
    businessParams () {
      let params = {
        userIds: [window.getLocalStorage('userId')],
        isDb: 0,
        salePeriodId: this.salePeriodId,
        sureStatus: this.sureStatus
      }
      if (this.productName === '全部') {
        params.productTypeId = this.productTypeId
      } else {
        params.productTypeId = this.productTypeId
        params.product = this.product
      }
      return params
    },
    countParams () {
      let param = {
        userIds: [window.getLocalStorage('userId')],
        salePeriodId: this.salePeriodId
      }
      if (this.productName === '全部') {
        param.productTypeId = this.productTypeId
      } else {
        param.productTypeId = this.productTypeId
        param.product = this.product
      }
      return param
    }
  },
  watch: {
    businessParams () {
      this.getAllBusiness()
    },
    countParams () {
      this.getBusinessCount()
    }
  },
  created () {
    this.initBusinessList()
  },
  methods: {
    initBusinessList () {
      this.getAllBusiness()
      this.getBusinessCount()
      this.getAllProducts()
    },
    // tab点击事件
    tabChange (index) {
      this.offset = 0
      if (index === 0) {
        this.tabIndex = index
        this.salePeriodId = 5
        this.sureStatus = 2
        this.businessList = []
      }
      if (index === 1) {
        this.tabIndex = index
        this.salePeriodId = 8
        this.sureStatus = 2
        this.businessList = []
      }
      if (index === 2) {
        this.tabIndex = index
        this.salePeriodId = 1
        this.sureStatus = 2
        this.businessList = []
      }
      if (index === 3) {
        this.tabIndex = index
        this.salePeriodId = 10
        this.sureStatus = 2
        this.businessList = []
      }
      if (index === 4) {
        this.tabIndex = index
        this.salePeriodId = 10
        this.sureStatus = 1
        this.businessList = []
      }
    },
    // 商机数量count
    getBusinessCount () {
      GetBusinessCount(this.countParams).then((res) => {
        this.gjzCount = res.gjzCount
        this.jjcsCount = res.jjcsCount
        this.ydCount = res.ydCount
        this.allCount = res.allCount
        this.dshCount = res.dshCount
      })
    },
    // 商机列表list
    getAllBusiness () {
      this.loading = true
      GetBusinessList(this.limit, this.offset, this.orderby, this.direction, this.businessParams).then((res) => {
        if (res.datas.length === 0) {
          this.businessList = []
        } else {
          this.businessList = this.businessList.concat(res.datas)
          this.offset = this.limit + this.offset
          res.datas.length < this.limit ? this.isLoaded = true : this.isLoaded = false
        }
        this.loading = false
      })
    },
    loadMoreBusiness () {
      if (this.loading) {
        this.getAllBusiness()
      }
    },
    // 下拉框筛选
    showFilterList (tab) {
      this.isShowFilterList = true
      this.isShowMask = true
      tab === 'product' ? this.filterIndex = 0 : tab === 'period' ? this.filterIndex = 1 : this.filterIndex = 2
    },
    hideFilterList () {
      this.isShowFilterList = false
      this.isShowMask = false
    },
    tabFilter (filterIndex) {
      this.filterIndex = filterIndex
    },
    getAllProducts () {
      GetAllProducts().then((res) => {
        this.productList = res
        res.forEach((item) => {
          this.subProductList = item.products
        })
      })
    },
    // 选择一级产品
    selectOneProduct (index) {
      if (index === -1) { // 点击一级产品里的'全部产品'
        this.subProductList = []
        this.productTypeId = ''
        this.productTypeName = '全部产品'
      } else {
        this.subProductList = this.productList[index].products
        this.productTypeId = this.productList[index].productType.pid
        this.productTypeName = this.productList[index].productType.name
      }
    },
    // 选择二级产品
    selectSubProduct (productId, productName) {
      if (productId === '') {
        this.product = ''
        this.productName = '全部'
        this.filterProductName = this.productTypeName
      } else {
        this.product = productId
        this.productName = productName
        this.filterProductName = productName
      }
      this.hideFilterList()
    },
    // 选择商机阶段
    selectPeriod (periodId, periodName) {
      this.filterPeriodName = periodName
      if (periodId === '') {
        this.salePeriodId = ''
      } else {
        this.salePeriodId = periodId
      }
      this.hideFilterList()
    },
    // 选择商机类型
    selectType (dateType) {
      if (dateType === 'create') {
        this.filterTypeName = '最新获得'
        this.orderby = 'createTime'
      } else if (dateType === 'update') {
        this.filterTypeName = '最近更新'
        this.orderby = 'lastLogTime'
      }
      this.getAllBusiness()
      this.hideFilterList()
    },
    businessToDetail (id) {
      this.$router.push(`/businessDetail/${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .list-wrap
    padding 0 15px
  /*商机列表*/
  .business-item
    position: relative
    margin-top 10px
    margin-bottom 10px
    padding 10px
    background #fff
    border-radius 4px
    overflow hidden
  .business-item>div:first-child
    font-size: 16px !important
    line-height: 22px
    margin-bottom: 5px
  .business-item>div:not(:first-child)
    color: #999
    font-size: 12px !important
    line-height: 18px
  .business-item>div i
    float: right
    font-size: 12px
  .business-item .last-log
    position: absolute
    right: 10px
    bottom: 10px
    text-align: right
    div:last-child
      color: #1AB394
</style>
